<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="container">
        <!-- <img src="" alt="">
        <h2>film.name</h2>
        <h4>film.category</h3>
        <h3>film.synopsis</h3> -->
    </div>



</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>

<script>

    function getMovieDeatil(filmId = 5936) {
        let url = `/api/v1/maizuo/detail?filmId=${filmId}&k=6875894`;

        // 发送网络请求
        axios.get(url).then(function (res) {
            console.log(res);
            // 解构
            let { data: { data: { film } } } = res;
            // console.log("===========", filmId);
            let html = "";
            // 添加内容到页面中
            html = `
                    <img width="200" src="${film.poster}" alt="">
                    <h2>${film.name}</h2>
                    <h3>${film.category}</h3>
                    <h4>导演：${film.director}</h4>
                    <h4>${film.nation}|${film.runtime}分钟</h4>
                    <h3>${film.synopsis}</h3>
                    `


            $("#container").append(html);
        })
    }

    /* 详情页获取电影的主键id，根据主键id，调用详情接口获取电影的详情信息
    
    http://localhost:9001/detail?filmId=5945&type=2&k=6875894



    以后在开发中，要处理 key=value&key1=value1&key2=value2 的形式，可以使用一个 qs（queryString）的 npm 处理
    
    */

    // filmId: 5945
    let href = location.href;
    // let filmId = href.split("?")[1].split("=")[1];
    // 使用正则匹配这个 filmId
    let reg = /filmId=\d+/gi;

    let arr = href.match(reg);
    console.log(arr);
    if (arr.length > 0) {
        let filmId = arr[0].split("=")[1];
        console.log(filmId);
        getMovieDeatil(filmId);


    } else {
        alert('请不要恶意操作，修改 filmId!');
    }


</script>

</html>